<template>
	<view class="guide-head">
		<view class="guide-head_mask"></view>
		<image class="guide-head_bg" src="/static/images/lines.jpg" mode=""></image>
		<view class="guide-head_info">
			<view class="guide-head_info_name">
				语音介绍
			</view>
		</view>
	</view>
	<view class="guide-body">
		<slot></slot>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.guide-body{
		margin-top: -300rpx;
		position: relative;
		z-index: 9;
	}
	.guide-head {
		height: 500rpx;
		position: relative;
		overflow: hidden;

		&_info {
			position: absolute;
			top: 150rpx;
			left: 30rpx;
			color: #fff;

			&_name {
				font-size: 24rpx;
				background: rgba(0,0,0,.7);
				color: #fff;
				border-radius: 30rpx;
				padding: 4rpx 20rpx;
			}
		}


		&_mask {
			height: inherit;
			width: 100%;
			// background-color: var(--color);
			background-image: linear-gradient(to bottom, transparent, transparent, transparent, transparent, rgba(247, 248, 249, .3), rgba(247, 248, 249, .6), rgba(247, 248, 249, 1), rgba(247, 248, 249, 1));
			background-size: cover;
			position: relative;
			z-index: 1;
		}

		&_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height:500rpx;
			// z-index: -1;
			// vertical-align: middle;
			// mix-blend-mode: multiply;
			animation: zoom 10s infinite ease-in-out;
		}
	}

	@keyframes zoom {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.3);
		}
	}
</style>